<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { downloadUserHelpFile } from "@/api/file";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { downloadFileWithBuffer } from "@/utils/download";
defineOptions({
  name: "Help"
});
const router = useRouter();
const windowHeight = ref(window.innerHeight);

// 更新窗口高度的函数
const updateWindowHeight = () => {
  windowHeight.value = window.innerHeight;
};

onMounted(() => {
  window.addEventListener("resize", updateWindowHeight);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateWindowHeight);
});
const url = router.resolve({
  path: '/quickUsage'
});
const urlB = router.resolve({
  path: '/scriptSpecifications'
});

const handleDownload = async () => {
  try {
    const res = await downloadUserHelpFile();
    downloadFileWithBuffer(res, '用户手册.zip');
    ElMessage.success('开始下载');
  } catch (error) {
    ElMessage.error(error);
  }
}



const handleClick = () => {
  // router.push({ name: 'helpfile' })
  console.log(url.href);// 输出为#/test-url// 打开新窗口
  window.open(url.href);
}
const handleClickB = () => {
  // router.push({ name: 'helpfile' })
  console.log(urlB.href);// 输出为#/test-url// 打开新窗口
  window.open(urlB.href);
}

</script>

<template>
  <div :style="{ height: `${windowHeight - 133}px` }">
    <el-space class="w-full" direction="vertical" fill :size="20">
      <h1>用户帮助</h1>
      <el-card>
        <el-space direction="vertical" alignment="flex-start">
          <h3>快速使用方法</h3>
          <div class="des">查看solo派使用流程，快速开展性能测试......</div>
          <el-link type="primary" target="_blank" @click="handleClick">点击查看</el-link>
        </el-space>
      </el-card>

      <el-card>
        <el-space direction="vertical" alignment="flex-start">
          <h3>脚本规范</h3>
          <span class="des">由于本框架中的JTL测试结果解析以及HTML报告为自主研发，为适配本框架的应用，Jmeter测试脚本需遵循如下规范约束......</span>
          <el-link type="primary" target="_blank" @click="handleClickB">点击查看</el-link>
        </el-space>
      </el-card>
      <el-card>
        <el-space direction="vertical" alignment="flex-start">
          <h3>用户手册</h3>
          <span
            class="des">Solo派旨在帮助用户独立自主、高效便捷的执行性能测试。Solo派提供了一种简单易用的方法，简化了性能测试过程中复杂繁琐的测试动作，让用户可以轻松创建、高效管理性能测试项目，用户可以更专注于测试的核心内容，提升工作效率。</span>
          <el-link type="primary" target="_blank" @click="handleDownload">点击下载</el-link>
        </el-space>
      </el-card>
    </el-space>
  </div>
</template>

<style lang="scss" scoped>
.des {
  color: #909399;
}
</style>
